<template>
  <div class="user-admin-class">
    <div class="desc-class">
      <p>id：{{user.id}}</p>
    <p>用户名：{{user.username}}</p>
    <p>密码：{{user.passwd}}</p>
    </div>
    <div class="function-class">
      <div><el-button @click="dialogVisible = true">编辑</el-button></div>
      <div><el-button @click="deleteUser(user)">删除</el-button></div>
    </div>
    <el-dialog
      title="修改"
      style="width: 50%;margin: 0 auto"
      :visible.sync="dialogVisible"
      :before-close="handleClose">
      <el-form :rules="rules" ref="editForm">
        <el-form-item style="margin-bottom: 10px">
          <label style="width:10em;margin-right: 40px;float: left;text-align: right">用户id：</label>
          <label>{{user.user_id}}</label>
        </el-form-item>
        <el-form-item prop="name" style="margin-bottom: 10px;">
          <label style="width:10em;margin-right: 40px;float: left;text-align: right">用户名：</label>
          <input v-model="user.username" style="width: 200px" />
        </el-form-item>
        <el-form-item prop="passwd" style="margin-bottom: 10px;">
          <label style="width:10em;margin-right: 40px;float: left;text-align: right">密码：</label>
          <input v-model="user.password" style="width: 200px;"/>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="submitEditForm('editForm')">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  props: {
    user: {}
  },
  data () {
    return {
      dialogVisible: false,
      rules: {
        name: [
          {require: true, message: '用户名不能为空', trigger: 'change'}
        ],
        passwd: [
          {require: true, message: '密码不能为空', trigger: 'blur'},
          {type: 'password'}
        ]
      }
    }
  },
  methods: {
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    },
    deleteUser (user) {
      console.log('start delete')
      this.$confirm('确认删除？')
        .then(_ => {
          console.log('delete user!')
          // delete the movie by its mid
          this.$store.commit('TID', {tid: user.id})
          this.$store.dispatch('deleteUser')
        })
        .catch(_ => {})
    },
    submitEditForm (formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          console.log('validate is ok')
          this.$store.commit('USER', {user: this.user})
          this.$store.dispatch('updateUser')
        } else {
          console.log('error submit')
          return false
        }
      })
    }
  }
}
</script>
<style lang="less" rel="stylesheet/less">
@import "../../../style/color";
.user-admin-class{
  width: 600px;
  margin: 0 auto;
  .desc-class{
    display: inline-block;
    p{
      margin: 10px;
    }
  }
  .function-class{
    display: inline-block;
    vertical-align: top;
    margin-top: 20px;
  }
}

</style>
